<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>联系人分类汇总报表</title>
  <style>
    #pieChartDiv {
        width: 900px;
        height: 600px;
        margin: 30px auto;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    }
    h2 {
        text-align: center;
        color: #3a3a3a;
        font-family: 'Arial', sans-serif;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        margin-top: 30px;
        font-size: 28px;
    }
    body {
        background-color: #f0f2f5;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
  </style>
</head>
<body>
<h2>📊 联系人分类汇总饼状图</h2>

<div id="pieChartDiv"></div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
  /*<![CDATA[*/
  // 获取后端传递的数据
  const categories = [];
  const dataCountByCategory = [[${dataCountByCategory}]];

  // 将 List<Map<String, Integer>> 转换成 ECharts 饼图需要的格式
  const pieData = [];

  for (let i = 0; i < dataCountByCategory.length; i++) {
      const item = dataCountByCategory[i];
      console.log(item);
      const key = Object.keys(item)[0];
      const name = item[Object.keys(item)[1]]
      categories.push(name);
      const value = item[key];
      pieData.push({
          name: name,
          value: value
      });
  }

  console.log(categories);
  console.log(pieData);

  // 初始化 ECharts 实例
  const pieChart = echarts.init(document.getElementById('pieChartDiv'));

  // 炫酷的配色方案
  const colorPalette = [
      '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de',
      '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#17b3a3'
  ];

  // 配置项
  const pieOption = {
      backgroundColor: 'transparent',
      title: {
          text: '分类占比分析',
          subtext: '实时数据统计',
          left: 'center',
          top: 20,
          textStyle: {
              color: '#3a3a3a',
              fontSize: 22,
              fontWeight: 'bold'
          },
          subtextStyle: {
              color: '#666',
              fontSize: 14
          }
      },
      tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
          backgroundColor: 'rgba(50, 50, 50, 0.7)',
          borderColor: '#333',
          textStyle: {
              color: '#fff',
              fontSize: 14
          },
          extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 5px;'
      },
      legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 30,
          top: 'center',
          data: categories,
          textStyle: {
              color: '#333',
              fontSize: 12
          },
          pageTextStyle: {
              color: '#333'
          },
          pageIconColor: '#666',
          pageIconInactiveColor: '#bbb'
      },
      series: [
          {
              name: '联系人分类',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
              },
              label: {
                  show: true,
                  formatter: '{b}: {d}%',
                  fontSize: 14,
                  fontWeight: 'bold',
                  color: '#333'
              },
              emphasis: {
                  label: {
                      show: true,
                      fontSize: '18',
                      fontWeight: 'bold'
                  },
                  itemStyle: {
                      shadowBlur: 15,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              },
              labelLine: {
                  show: true,
                  length: 20,
                  length2: 15,
                  lineStyle: {
                      width: 1.5
                  }
              },
              data: pieData,
              color: colorPalette,
              roseType: 'radius',
              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                  return Math.random() * 200;
              }
          }
      ],
      graphic: [
          {
              type: 'text',
              left: 'center',
              top: '45%',
              style: {
                  text: '总计\n' + pieData.reduce((sum, item) => sum + item.value, 0),
                  fill: '#3a3a3a',
                  fontSize: 24,
                  fontWeight: 'bold',
                  textAlign: 'center'
              },
              z: 100
          }
      ]
  };

  // 使用配置项
  pieChart.setOption(pieOption);

  // 响应式调整
  window.addEventListener('resize', function() {
      pieChart.resize();
  });

  // 添加点击事件
  pieChart.on('click', function(params) {
      console.log(params);
      // 可以在这里添加点击后的交互逻辑
  });
  /*]]>*/
</script>
</body>
</html>